<template>
	<view>
		<view class="item">
			<view class="title-box">
				<view>
					<image src="../../static/img/bot/us.png" style="width: 70rpx; height: 40rpx;margin-right: 6rpx;"></image>
					{{item.stakingCurrencyCode}}/{{item.stakingTwoCurrencyCode}}
				</view>
			</view>
			<view class="info-box">
				<view class="need-pay">
					<view class="label-box">{{$t("robot.payment")}}</view>
					<view class="number-box">
						<view>{{item.stakingAmount}} {{item.stakingCurrencyCode}}</view>
						<view><text>≈{{item.stakingAmount}} {{item.stakingCurrencyCode}}</text>{{item.twoCurrencyAmount}} {{item.stakingTwoCurrencyCode}}</view>
					</view>
				</view>
				<view class="need-pay" style="margin-top: 20rpx;">
					<view class="label-box">{{$t("robot.day")}}</view>
					<view>
						<view>{{item.everyDayOutPut}} {{item.outPutCurrencyCode}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="involved-number-box">
			<view class="title-box">{{$t("robot.involvedNum")}}</view>
			<view class="form-box">
				<up-input v-model="num" :placeholder="$t('robot.placeholder')"  type="number">
					<template #suffix>
						<u-button @click="num = 100" text="MAX" type="success" shape="circle" size="mini"color="#1C5FFF"></u-button>
					</template>
				</up-input>
			</view>
			<view class="need-number">
				<view>{{$t("robot.needNumber")}}</view>
				<view>
					<view>{{Number(item.stakingAmount) * num}} USDC</view>
					<view>{{Number(item.twoCurrencyAmount) * num}} WNA</view>
				</view>
			</view>
			<view class="other-box">
				<view>WNA{{$t("robot.balance")}}：{{Number(columns[0].find(item => item.currencyCode == 'WNA').availableBalance).toFixed(6)}} </view>
				<view>USDC{{$t("robot.balance")}}：{{Number(balance.availableBalance).toFixed(6)}}</view>
			</view>
		</view>
		
		<view class="btn-box">
			<u-button :text="$t('robot.pay')" type="success" shape="circle" color="#1C5FFF" @click="submit"></u-button>
		</view>
		
		<view class="des-box">
			<text>{{$t('robot.describe')}}</text>
		</view>
		
		<view class="bottom-box"></view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getCurrencyBalance,postcreateRobot } from '@/common/api/common.js'
	import { useI18n } from 'vue-i18n';
	const {t} = useI18n();
	const item = ref({})
	const columns = ref([[]]);
	const balance = ref({})
	
	const num = ref('')
	
	const getCurrencyBalanceFn = async () => {
		const res = await getCurrencyBalance({
			marketId: 2
		})
		if(res.status == 0){
			res.result.memberAccount.map((item,index) => {
				item.id = index + 1
			})
			balance.value = res.result.memberAccount[0]
			columns.value[0] = res.result.memberAccount
		}
	}
	
	const submit = async () => {
		if(!num.value) {
			uni.$u.toast(t("robot.placeholder"))
			return
		}
		uni.showModal({
			title: '提示',
			content: '确认要进行机器人购买吗？',
			success: function (res) {
				if (res.confirm) {
					// console.log('用户点击确定');
					postcreateRobot({robotId: item.value.id,num: num.value}).then(data => {
						if(data.status == 0){
							uni.$u.toast(t("success"))
							num.value = ''
						}
					})
				} else if (res.cancel) {
					// console.log('用户点击取消');
				}
			}
		});
	}
	
	onLoad((option) => {
		item.value = JSON.parse(decodeURIComponent(option.item));
		getCurrencyBalanceFn();
	})
	
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.item {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.title-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;

			view {
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			.btn-box {
				text {
					padding: 4rpx 20rpx;
					background: #1C5FFF;
					border-radius: 30rpx;
					color: #ffffff;
				}
			}
		}

		.info-box {
			background-color: #ffffff;
			border-radius: 16rpx;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.need-pay {
				display: flex;
				justify-content: space-between;

				.label-box {
					color: #1F1F1F80;
				}

				.number-box {
					text-align: right;

					text {
						color: #1F1F1F80;
						padding-right: 10rpx;
					}
				}
			}
		}
	}

	.involved-number-box {
		width: calc(100vw - 80rpx);
		margin: 20rpx auto 0;
		background: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx 40rpx;
		box-sizing: border-box;

		.title-box {
			font-weight: bold;
			font-size: 30rpx;
			color: #1F1F1F;
		}
		
		.form-box{
			margin-top: 20rpx;
			.u-form-item{
				border-radius: 16rpx;
				background: #ffffff;
				padding: 0 20rpx;
			}
		}
		
		.need-number{
			background: #1C5FFF;
			margin-top: 20rpx;
			border-radius:16rpx;
			color: #ffffff;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			box-sizing: border-box;
		}
		
		.other-box{
			font-weight: 500;
			font-size: 24rpx;
			color: #1F1F1F80;
			margin-top:20rpx;
			view{
				margin-bottom: 6rpx;
			}
		}
	}
	
	.btn-box{
		width: calc(100vw - 80rpx);
		margin: 50rpx auto 0;
		::v-deep .u-button{
			height:88rpx !important;
		}
	}
	
	.des-box{
		width: calc(100vw - 80rpx);
		margin: 50rpx auto 0;
		color: #1F1F1F80;
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
	}
</style>